<script setup lang="ts"></script>

<template>
    <div class="address-edit-page">
        <van-cell-group>
            <van-field label="收货人" placeholder="请输入收货人"></van-field>
            <van-field label="手机号码" placeholder="请输入手机号码"></van-field>
            <van-field label="所在地区" placeholder="请输入所在地区" readonly></van-field>
            <van-field label="详细地址" type="textarea" placeholder="请输入详细地址">
            </van-field>
            <van-field label="设为默认地址" readonly>
                <template #extra>
                    <van-checkbox :icon-size="20" checked-color="var(--mk-red)"></van-checkbox>
                </template>
            </van-field>
        </van-cell-group>
        <div class="submit">
            <van-button round block type="primary">
                保存
            </van-button>
        </div>
    </div>
</template>

<style lang="css" scoped>
.address-edit-page {
    width: 100%;
    min-height: 100vh;
    position: relative;
    padding-bottom: 80px;
}

.submit {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 16px;
    height: 80px;
}

.geo {
    width: 250px;
    height: 250px;
    overflow-y: auto;
}

.geo-title {
    font-size: 14px;
    color: var(--mk-gray);
    padding: 8px;
}

.geo-item {
    border-top: 0.5px solid var(--mk-under);
    padding: 8px;
}

.geo-item-label {
    font-size: 14px;
    color: var(--mk-red);
}

.geo-item-value {
    font-size: 12px;
    color: var(--mk-gray);
}
</style>